<template>
  <div class="top">
    <div class="item">

      <MessageTitle></MessageTitle>

      <!--头部-->
      <div v-loading="loading">
      <el-row :gutter="20" class="i-item" v-for="(item,index) in messageInfo" :key="index">
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-checkbox @change="checkItem(item.id,index)" v-model="item.is_all"></el-checkbox></div>
            </el-col>
        <el-col :span="2"><div class="grid-content bg-purple">{{item.id}}</div></el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">{{item.leaveName}}</div>
          </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-switch v-model="item.is_show" active-text="审核是否通过" @change="is_Show($event,item.id)"> </el-switch>
          </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-delete" title="删除" @click="messageDelete(item.id)">删除</el-button>
            <el-button type="primary" icon="el-icon-edit-outline" title="编辑" @click="textEdit(item.id)" >编辑</el-button>
          </div>
          </el-col>
      </el-row>
      </div>


      <!--底部-->
      <BottomBtn 
      :bottom = "bottom_info" 
      @pageNum = "getChildList" 
      :list_arr = "nowData.id" 
      @allChecked = "allChecked"
      :isCheck = "is_show_all_check">
      </BottomBtn>


    </div>
  </div>
</template>

<script>
import MessageTitle from '../messageItem/messageTop'
import BottomBtn from './bottomBtn'

import {message} from '@/network/allMessage/message'
import {updateMessage} from '@/network/allMessage/message'

export default {
  name: "messageAll",
  data(){
    return{
      checked:false,
      messageInfo:'',
       //发送删除，修改的数据格式
      nowData:{
          operation_type:'',
          id:[]
      },
       bottom_info:'',
      //当前页数
      temp_page:1,
      loading:false,
      //是否全选
      is_all_list:false,
      is_show_all_check:{
          num:0,//本页面共有多少数据
          checkNum:0//被选中的
      }
    }
  },
  components:{
    MessageTitle,
    BottomBtn
  },
  methods:{
    is_Show(event,id){
      let nowData = {
        operation_type:'update',
        id:id,
        data:event
      }
      updateMessage(nowData).then( res => {
        //console.log(res)
      }).catch( err => {
        console.log(err)
      })
    },
    //编辑足迹
    textEdit(id){
      //replace不会向栈中添加记录
      //push会向栈中添加一条记录
      //router.replace()是替换掉栈顶，而router.push()则是向栈中再堆如一个新记录。
      /*
      注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
      */
      //sessionStorage.removeItem("id")
      this.$router.push({
          name:'messageEdit',
          params: { 
              id:id
              }
            })
        },
    //接收当前页码
    getChildList(value){
      this.temp_page = value
    },
    //单个删除
    messageDelete(id){
      this.nowData.operation_type = 'delete'
      this.nowData.id.push({id:id})
      this.loading = true
      updateMessage(this.nowData).then( res => {
        let page = this.temp_page
        if(this.messageInfo.length == 1){
          page = page -1 
        }
        message(page).then( res => {
          this.bottom_info = res.data.result.pop()
          //清除最后一条记录的页码数和总数（返回值为删除的那条数据赋值给底部组件需要）
           res.data.result.forEach((item,index) =>{
              res.data.result[index]['is_all']= false
              if(res.data.result[index].is_show == 1){
                res.data.result[index].is_show = true
              }else{
                res.data.result[index].is_show = false
              }
            })
            this.loading = false
            this.messageInfo = res.data.result
            //console.log(res)
            this.$message({
                message: '删除成功',
                type: 'success'
              });
        }).catch( err => {
          console.log(err)
        })
      }).catch( err => {
        console.log(err)
      })
    },

    //多选删除
    checkItem(id,index){
      if(this.messageInfo[index].is_all == true){
        this.nowData.id.push({id:id})
      }

      if(this.messageInfo[index].is_all == false){
        if(this.nowData.id.length !== 0){
              this.nowData.id.forEach((item,index) => {
                if(item.id == id){
                    this.nowData.id.splice(index,1)
                }
            })
        }
      }
      this.is_show_all_check.checkNum = this.nowData.id.length
      //console.log(this.is_show_all_check)
    },

    //全选
    allChecked(value){
      this.is_all_list = value
    },

  },
  created(){
    message().then( res => {
        this.bottom_info = res.data.result.pop()
        //清除最后一条记录的页码数和总数（返回值为删除的那条数据赋值给底部组件需要）
          res.data.result.forEach((item,index) =>{
            res.data.result[index]['is_all']= false
            if(res.data.result[index].is_show == 1){
              res.data.result[index].is_show = true
            }else{
              res.data.result[index].is_show = false
            }
          })
            //console.log(res)
            this.messageInfo = res.data.result
            this.is_show_all_check.num = this.messageInfo.length
    }).catch( err => {
      console.log(err)
    })
  },

  watch:{
    //当前页码修改数据
    temp_page(newValue){
        message(newValue).then( res => {
          this.bottom_info = res.data.result.pop()
          //清除最后一条记录的页码数和总数（返回值为删除的那条数据赋值给底部组件需要）
          res.data.result.forEach((item,index) =>{
            res.data.result[index]['is_all']= false
            if(res.data.result[index].is_show == 1){
              res.data.result[index].is_show = true
            }else{
              res.data.result[index].is_show = false
            }
          })
          //console.log(res)
            this.messageInfo = res.data.result
            this.is_show_all_check.num = this.messageInfo.length
            this.nowData.id = []
          }).catch( err => {
            console.log(err)
          })
    },
    is_all_list(newValue){
         if(newValue == true){
              this.messageInfo.forEach((item,index) => {
                if(this.messageInfo[index].is_all == false){
                      this.messageInfo[index].is_all = true
                      this.checkItem(this.messageInfo[index].id,index)
                    }  
                })
            }else{
                if(this.nowData.id.length == this.messageInfo.length){
                     this.messageInfo.forEach((item,index) => {
                      this.messageInfo[index].is_all = false
                      this.checkItem(this.messageInfo[index].id,index)
                    })
                }
               
            }
    }
  }


}
</script>

<style lang="scss" scoped>
.top {
  padding: 10px;
  .item {
    background: #f5faff;
    .el-row {
      padding: 5px;
    }
    .grid-content {
      text-align: center;
      line-height: 40px;
    }
  }
}
.i-item{
  height: 50px;
}
</style>